import React from 'react';
import {BrowserRouter,Route,Link,Redirect,Switch} from 'react-router-dom'
import UserDetail from './pages/UserDetail'
import Parent from './pages/Parent'
import Children from './pages/Children'
import MyRoute from './my-route-dom/MyRoute'
import Customer from './pages/Customer'

function Home(props) {
    return (<div>首页信息</div>)
}
function About(props) {
    return (<div>关于本网站</div>)
}
function Users(props) {
    return (<div>
        <div><Link to="/users/333">张三</Link></div>
        <div><Link to="/users/444">李四</Link></div>
    </div>)
}
function NotFound(props) {
    return (<div>
        404 Not Found
    </div>)
}
function Always(props) {
    return (<div>
        Always
    </div>)
}
class App extends React.Component{
    render(){
        return(
            <BrowserRouter>
            <div>
               <div ><Link to="/home">首页</Link></div>
               <div ><Link to="/about">关于</Link></div>
               <div ><Link to="/users">用户列表</Link></div>

               <Switch>
                   {/* switch只能匹配一个路由，匹配到之后，后面的就不匹配了 */}
                <Redirect exact from="/" to="/home" />
                <Route path="/home" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/parent" component={Parent}/>
                {/* {第二种，子路由北嵌套在父组件内} */}
                {/* {父组件不可以加exact,匹配子组件必须先匹配到父组件的页面，或者找不到需要匹配路由的子组件
                    路由的匹配是一级一级的查找，从上到下} */}
                <Route path="/users" exact component={Users}/>
                 {/* {第一种，子组件和父组件处于同一级，子组件会覆盖掉父组件} */}
                <Route path="/users/:uid" component={UserDetail}/>
                {/* <Route path='/parent/children' component={Children}></Route> */}
                <Route component={NotFound}/>
               </Switch>
               <Route component={Always} />

               {/* 模拟路由 */}
               <MyRoute path="/customer" component={Customer}/>
            </div>
            </BrowserRouter>
        )
    }  
}
export default App;
